<template>
  <div class="app-container" v-loading="loading">
    <el-row type="flex" style="justify-content: space-between">
      <div style="flex: 1; min-width: 0; margin-top: 20px; margin-right: 15px">
        <carModel v-model="form" />
        <vehicleInformation v-model="form" ref="refDetailForm" :state="$route.query.type" />
        <carUpload v-model="form" :state="$route.query.type" />
      </div>
      <FlowRecord v-if="form.flowId" :id="form.flowId" />
    </el-row>
    <!--按钮  -->
    <div style="border-radius: 8px; text-align: right; margin-top: 20px; background-color: #fff; height: 60px; line-height: 60px; box-sizing: border-box; padding-right: 20px" v-if="$route.query.type !== 'view'">
      <el-button @click="onCancel">取 消</el-button>
      <el-button plain type="primary" @click="onSave" v-hasPermi="['sublease:subleaseView:save']">保 存</el-button>
      <el-button @click="onSubmit" type="primary" v-hasPermi="['sublease:subleaseView:submit']">提 交</el-button>
    </div>
    <div style="border-radius: 8px; text-align: right; margin-top: 20px; background-color: #fff; padding: 10px; box-sizing: border-box" v-if="$route.query.type == 'view'">
      <el-button @click="onCancel">返 回</el-button>
    </div>
  </div>
</template>

<script>
import carModel from './components/carModel'
import carUpload from './components/carUpload'
import vehicleInformation from './components/vehicleInformation'
import { getSublease, outChangeRen, outChangeRenSubmit } from '@/api/purchaseManage/sublease'

export default {
  name: 'SubleaseView',
  components: {
    carModel,
    carUpload,
    vehicleInformation,
  },
  data() {
    return {
      form: {},
      loading: false,
    }
  },
  created() {
    this.getDataObj()
  },
  methods: {
    async getDataObj() {
      this.loading = true
      try {
        let res = await getSublease(this.$route.query.id)
        this.form = res.data
        this.loading = false
      } catch (error) {
        this.loading = false
      }
    },
    onSave() {
      //   if (this.$refs.refDetailForm.handleEffect()) {
      const loading = this.$loading({
        lock: true,
        text: '保存中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      outChangeRen(this.form)
        .then((res) => {
          loading.close()
          this.$message.success('保存成功')
          this.onCancel()
        })
        .catch((error) => {
          loading.close()
        })
      //   } else {
      //     this.$refs.refDetailForm.error();
      //   }
    },
    onCancel() {
      this.$tab.closeOpenPage(this.$route)
      this._toPage({
        name: 'SubleaseList',
      })
    },
    onSubmit() {
      if (this.form.infoVo.length == 0) {
        return this.$message.error('请选择车辆')
      }
      if (this.$refs.refDetailForm.handleEffect()) {
        let NumberTotalSelect = this.form.infoVo.length > 0 ? this.form.infoVo.reduce((num, obj) => Number(num) + Number(obj.carNumber), 0) : 0
        let NumberTotal = this.$refs?.refDetailForm.dataList.length > 0 ? this.$refs?.refDetailForm.dataList.reduce((num, obj) => Number(num) + Number(obj.needProcureNumber), 0) : 0
        console.log('弹窗总和', NumberTotal, '选中的数据', NumberTotalSelect)
        if (NumberTotalSelect < NumberTotal) {
          return this.$message.error('还有剩余采购台数')
        } else if (NumberTotalSelect > NumberTotal) {
          return this.$message.error('超过最大可采购台数')
        } else {
          const loading = this.$loading({
            lock: true,
            text: '提交中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)',
          })
          outChangeRenSubmit(this.form)
            .then((res) => {
              loading.close()
              this.$message.success('提交成功')
              this.onCancel()
            })
            .catch((error) => {
              loading.close()
            })
        }
      } else {
        this.$refs.refDetailForm.error()
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.app-container {
  overflow: auto;
}
</style>
